<template>
	<view class="conent_for">
		<view class="conent_for_title">{{$t('运输路线')}}</view>
		<view v-if="message.length>0" @click="handeleItem(index)" v-for="(item,index) in message" :key="index" :class="index==indexID?'for_item':'for_item_active'">
			<view class="for_flex_block">
				<view class="for_flex">
					<image 
					v-if="index==indexID"
					style="width: 40rpx;height: 40rpx;" 
					src="@/static/homePage/dsds.png" />
					<image
					v-else
					style="width: 40rpx;height: 40rpx;" 
					src="@/static/homePage/map-drawx.png" />
					<view class="for_flex_address" v-if="lang=='zh'">{{item.cfd.shortname}}-{{item.cfd.name}}</view>
					<view class="for_flex_address" v-if="lang=='ru'">{{item.cfd.shortname_ru}}-{{item.cfd.name_ru}}</view>
				</view>
				<view class="for_flex">
					<image 
					v-if="index==indexID"
					style="width: 40rpx;height: 40rpx;" 
					src="@/static/homePage/dsds.png" />
					<image
					v-else
					style="width: 40rpx;height: 40rpx;" 
					src="@/static/homePage/map-drawx.png" />
					<view class="for_flex_address" v-if="lang=='zh'">{{item.mdd.shortname}}-{{item.mdd.name}}</view>
					<view class="for_flex_address" v-if="lang=='ru'">{{item.mdd.shortname_ru}}-{{item.mdd.name_ru}}</view>
				</view>
			</view>
			<view class="flex_right">
				<image style="width: 25rpx;height: 25rpx;margin-right: 4rpx;margin-top: 4rpx;" src="@/static/homePage/jtymxzx.png" mode=""></image>
			</view>
		</view>
		<view v-if="message.length==0" class="for-zw">{{$t('暂无信息')}}</view>
	</view>
</template>

<script>
	export default {
		props: ['message','lang'],
		data() {
			return {
				list: [1, 2, 3],
				indexID: 0
			}
		},
		methods:{
			handeleItem(index){
				this.indexID = index
			}
		}
	}
</script>

<style scoped>
	.for-zw{
		font-size: 24rpx;
		color: #999999;
		width: 100%;
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.flex_right{
		width: 40rpx;
		height: 40rpx;
		background: #F7F8FB;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.for_flex_block{
		width: 550rpx;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
	}
	.for_flex_address {
		margin-left: 11rpx;
		/* background-color: #3D3D3D; */
		width: 480rpx;
		height: 40rpx;
		text-overflow: ellipsis;
		overflow: hidden;
		word-break: break-all;
		white-space: nowrap;
	}

	.for_flex {
		width: 100%;
		height: 40rpx;
		display: flex;
		align-items: center;
	}

	.for_item {
		padding: 17rpx 21rpx;
		width: 630rpx;
		height: 138rpx;
		background: #0BC471;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		margin-bottom: 12rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		color: #FFFFFF;
	}
	.for_item_active {
		padding: 17rpx 21rpx;
		width: 630rpx;
		height: 138rpx;
		background: #F0F0F0;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		margin-bottom: 12rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.conent_for_title {
		font-weight: 500;
		font-size: 30rpx;
		color: #3D3D3D;
		margin-bottom: 24rpx;
	}

	.conent_for {
		width: 690rpx;
		min-height: 248rpx;
		background: #FFFFFF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		margin-top: 12rpx;
		padding: 34rpx 30rpx 24rpx 30rpx;
	}
</style>